<template>
    <div class="d-flex">
        <div v-for="(img, index) in imgList" :key="index" class="demo-upload-list img-size mb-8 ">
            <img :src="img" alt="uploaded image" class="img-size" />
            <div class="demo-upload-list-cover">
                <Icon type="ios-eye-outline" @click.native="enlargePicture(img)"></Icon>
                <Icon type="ios-trash-outline" @click.native="deletePicture(index)"></Icon>
            </div>
        </div>
        <Upload v-if="maxCount > imgList.length" action="#" :before-upload="beforeUpload" ref="upload" :accept="'.png,.jpg,.jpeg'" :disabled="false">
            <div class="d-flex-center flex-column choose-img">
                <!--                <Icon type="ios-cloud-upload" size="large" style="color: #3399ff"></Icon>-->
                <i class="ivu-icon ivu-icon-ios-cloud-upload upload-icon "></i>
                <p class="fs-16">点击选择图片</p>
            </div>
        </Upload>
        <!--查看大图-->
        <Modal draggable v-model="enlargePictureModal" footer-hide width="430px" title="查看图片">
            <img :src="modalImg" width="400px" />
        </Modal>
    </div>
</template>

<style scoped>
.img-size {
    width: 320px;
    height: 180px;
    object-fit: contain;
}

.choose-img {
    border: 1px solid #cccccc;
    width: 320px;
    height: 180px;
    box-sizing: border-box;
}
</style>

<script>
// region TODO 弹窗中的图片
const enlargePictureModal = false;
const modalImg = '';

// endregion
export default {
    props: {
        maxCount: {
            type: Number,
            required: true
        },
        images: {
            type: String,
            required: false,
            default: ''
        }
    },
    watch: {
        images(val) {
            if(this.images.indexOf(",") !== -1 ){
                const backImages=this.images.split(',') || '';
                for (const image of backImages) {
                    this.imgList.push(image);
                }
            }else{
                this.imgList.push(this.images);
            }
        }
    },
    mounted() {
        if (this.images.length > 0) {
            this.imgList.push(this.images);
        }
    },
    created() {
        if (this.images) {
            this.formFile.push(this.images);
        }
    },
    data() {
        return {
            formFile: [],
            enlargePictureModal,
            modalImg,
            imgList: []
        };
    },
    methods: {
        beforeUpload(file) {
            this.formFile.push(file);
            this.imgList.push(URL.createObjectURL(file));
            console.log("图片file",file)
            this.$emit('beforeUpload');
            return false;
        },
        enlargePicture: function(img) {
            this.modalImg = img;
            this.enlargePictureModal = true;
        },
        deletePicture: function(index) {
            this.formFile.splice(index, 1);
            this.imgList.splice(index, 1);
        },
        handleFormatError(file) {
            this.$Notice.warning({
                title: '文件格式不正确',
                desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
            });
        }
    }
};
</script>

<style scoped>
.demo-upload-list {
    position: relative;
    margin-right: 4px;
}

.demo-upload-list-cover {
    width: 320px;
    height: 180px;
    text-align: center;
    line-height: 180px;
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
}

.demo-upload-list:hover .demo-upload-list-cover {
    display: block;
}

.demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}
.upload-icon {
    color: #3399ff;
    font-size: 50px;
}
</style>
